<template>
	<view class="body">
		<!-- 1.标题 -->
		<uni-nav-bar title="专家信息" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true">
		</uni-nav-bar>
		<!-- 2.搜索 -->
		<view class="search">
			<view class="twoline">
				<!-- 选择日期 -->
				<view class="left">
					<view class="content">
						<view class="center">
							<view class="imgs">
								<image src="@/static/socialized-service/specialist-consultation/search/user.png"
									class="img" mode="aspectFit">
								</image>
							</view>
							<uni-easyinput class="uni-mt-5" v-model="keyword" @clear="clear" :inputBorder="false" placeholder="请输入专家名">
							</uni-easyinput>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="goSearch">搜索</view>
				</view>
			</view>
		</view>
		<!-- 3.主体内容 -->
		<view class="main">
			<view class="content">
				<scroll-view scroll-y="true" :style="{height:setcollapseheight() - 50 + 'px'}">
					<view class="contentItem" v-for="item in expertInfoList" :key="item.personId">
						<view class="name">
							{{item.name}}
							<!-- 9/14迭代 -->
							<view class="age" v-show="item.seniority">
								工龄：{{item.seniority}}年
							</view>
							<view class="area" v-show="item.workplace">
								{{item.workplace}}
							</view>
							<view class="img">
								<image src="@/static/index-message/expert.png" mode=""></image>
							</view>
						</view>
						<view class="reply" v-if="item.answerNum">
							<view class="left">
								近期回复帖子{{item.answerNum}}次
							</view>
							<!-- <view class="right">
								浙江省湖州市农科院
							</view> -->
						</view>
						<view class="reply" v-if="!item.answerNum">
							<view class="left">
								近期回复帖子0次
							</view>
							<!-- <view class="right">
								浙江省湖州市农科院
							</view> -->
						</view>
						<view class="introduce">
							<view class="line">
								<view class="img">
									<image src="@/static/index-message/introduce.png" mode=""></image>
								</view>
								<view class="name">
									专家介绍：
								</view>
							</view>
							<view class="text">
								{{item.introduce}}
							</view>
						</view>
						<!-- 预约 -->
						<view class="order" v-if="!disableSendMsgFlag">
							<view class="order-btn">
								<u-button type="primary" text="上门服务" shape="circle" color="#0480FB" size="mini"
									style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);padding: 25rpx 10rpx;"
									@click="goDoorService(item.personId)">
								</u-button>
							</view>
							<view>
								<u-button type="primary" text="线上服务"  shape="circle" color="#0480FB" size="mini"
									style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);padding: 25rpx 10rpx;"
									@click="goOnlineService(item)">
								</u-button>
							</view>
						</view>
					</view>
					<view class="bottom-ios-line">

					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 4.底部tab -->
		<bottomTabar></bottomTabar>
		<!-- 5.弹出层 -->
		<u-popup :show="popShow" mode="center" :custom-style="popStyle">
			<view class="title" style="font-weight: 700;text-align: center;">
				申请提示
			</view>
			<view class="tip" style="margin-top: 10rpx;" @close="popShow = false" @open="popShow = true">
				该专家当天咨询量已满，您是否要继续申请咨询？
			</view>
			<u-button type="success" style="margin-top: 40rpx;" @click="popConfirm">确定</u-button>
			<u-button type="primary" style="margin-top: 5rpx;" @click="popShow = false">取消</u-button>
		</u-popup>
	</view>
</template>

<script>
	import serviceApi from '@/api/socialized-servce/specialist-consultation/order/index.js'
	import navBar from '../../components/nav-bar/index.vue'
	import bottomTabar from '../../components/bottom-tabaruser/index.vue'
	import expertInfoAPI from '@/api/socialized-servce/specialist-consultation/user-module/expert-information/index.js'
	export default {
		data() {
			return {
				keyword: '',
				expertInfoList: [],
				popStyle: {
					padding: '40rpx'
				},
				popShow: false,
				userId: uni.getStorageSync('userId'),
				otherId: '',
				disableSendMsgFlag: false
			}
		},
		components: {
			bottomTabar,
			navBar
		},
		mounted() {
			this.disableSendMsgFlag = uni.getStorageSync('disableSendMsgFlag')
		},
		onShow() {
			this.getExpertInfoList()
			// this.getReplayDiagnosticNum()
		},
		methods: {
			// 获取专家信息列表
			async getExpertInfoList(param = {}) {
				let params = {
					...param,
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}
				let res = await expertInfoAPI.queryExpertInfo(params)
				if (res.code == 200) {
					this.expertInfoList = res.data
					// console.log(this.expertInfoList);
				}
			},
			// 获取近期回复帖子数量
			async getReplayDiagnosticNum() {
				let res = await expertInfoAPI.queryReplyNumber(uni.getStorageSync('serviceProviderNo'))
				console.log(res);
			},
			// 查询
			goSearch() {
				let params = {
					name: this.keyword
				}
				this.getExpertInfoList(params)
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(136)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10

				// #endif
				return winHeight
			},
			goHome() {
				uni.switchTab({
					url: '/pages/socialized-service/selection-system/selection-system'
				})
			},
			// 上门服务
			async goDoorService(e) {
				uni.redirectTo({
					url: `/subPage1/socialized-service/specialist-consultation/user-module/door-service/order-page/order-page?id=${e}&status=1`
				})
			},
			// 线上服务
			goOnlineService (data) {
				let that = this
				if (data.chatOrder) {
					if (data.chatOrder.status == 2) {
						uni.showToast({
							title: '已提交咨询申请，请勿重复提交',
							icon: 'none'
						})
						return
					}
					let chatOrderStatus = data.chatOrder ? data.chatOrder.status : 0
					let chatOrderId = data.chatOrder && data.chatOrder.id
					uni.reLaunch({
						url: `/subPage1/socialized-service/specialist-consultation/user-module/online-service/chat/chat?type=userExpert&otherId=${data.userId}&chatOrderStatus=${chatOrderStatus}&chatOrderId=${chatOrderId}`
					})
				} else {
					expertInfoAPI.overOnlineNum(data.personId).then(res => {
						if (res.code == 200) {
							if (!res.data) {
								that.creatChart(data)
							} else {
								uni.showModal({
									title: '提示',
									content: `专家今日咨询人数已到上线，需要申请，确认要申请吗？`,
									cancelText: "取消",
									confirmText: "确认",
									success(res) {
										if (res.confirm) {
											that.creatChart(data, 1)
										}
									}
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			creatChart (data, status) {
				expertInfoAPI.create({
					expertUserId: data.userId,
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}).then(res => {
					if (res.code == 200) {
						if (status) {
							uni.showToast({
								title: '申请成功，等待审核',
								icon: 'none'
							})
						} else {
							let chatOrderStatus = res.status
							let chatOrderId = res.id
							uni.reLaunch({
								url: `/subPage1/socialized-service/specialist-consultation/user-module/online-service/chat/chat?type=userExpert&otherId=${data.userId}&chatOrderStatus=${chatOrderStatus}&chatOrderId=${chatOrderId}`
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// async goOnlineService(item) {
			// 	uni.reLaunch({
			// 		url: `/subPage1/socialized-service/specialist-consultation/user-module/online-service/chat/chat?type=userExpert&otherId=${item.userId}`
			// 	})
			// },
			// 是否继续申请咨询
			async popConfirm() {
				// let res = await serviceApi.continueApplyConsultation()
				// console.log(res);
				// if(res.code === 200) {
				// 	uni.reLaunch({
				// 		url: '/subPage1/socialized-service/specialist-consultation/user-module/online-service/chat/chat?type=user'
				// 	})
				// }
				console.log('继续申请');
			},
			clear() {
				this.getExpertInfoList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #F5F6FA;

		.search {
			width: 95%;
			padding-top: 16rpx;
			padding-right: 30rpx;
			align-items: center;
			justify-content: center;
			background-color: #F5F6FA;
			z-index: 99999;

			.twoline {
				position: relative;
				display: flex;
				margin-left: 30rpx;
				padding: 0 20rpx;
				height: 80rpx;
				border-radius: 60rpx;
				background-color: rgba(255, 255, 255, 1);
				border: 1px solid rgba(0, 0, 0, 0.05);
				box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;

				.left {
					display: flex;
					flex: 50%;
					color: #FFFFFF;
					height: 50rpx;
					border-right: 4rpx #cccbce solid;
					margin-left: 5rpx;
					padding-right: 10rpx;
					font-size: 30rpx;

					.content {
						color: #959497;
						height: 50rpx;
						white-space: nowrap;
						font-weight: 600;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.center {
							display: flex;
							justify-content: center;
							align-items: center;

							.imgs {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;

								.img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								width: 190rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

						}
					}
				}

				.left {
					flex: 80%;
				}

				.right {
					flex: 50%;
					height: 50rpx;
					color: #959497;
					padding-right: 10rpx;
					white-space: nowrap;
					font-weight: 600;
					font-size: 30rpx;

					.content {
						color: #959497;
						height: 50rpx;
						margin-left: 10rpx;
						white-space: nowrap;
						font-weight: 600;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.center {
						display: flex;
						justify-content: center;
						align-items: center;

						.imgs {
							margin-right: 10rpx;
							width: 50rpx;
							height: 50rpx;

							.img {
								width: 100%;
								height: 100%;
							}

						}

						.keyword {
							height: 50rpx;
						}
					}

					.btn {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						z-index: 66;
						width: 124rpx;
						height: 64rpx;
						margin-left: 8rpx;
						font-size: 28rpx;
						line-height: 64rpx;
						text-align: center;
						color: #FFFFFF;
						background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						opacity: 1;
					}
				}

				.right {
					flex: 20%;
				}

				.searchbutton {
					flex: 1;
					width: 20%;
					background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
					border-radius: 40rpx;
					box-shadow: none;
					margin-left: 10rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

		}
	}

	.main {

		.content {
			margin: 0 32rpx;

			.contentItem {
				position: relative;
				margin-top: 26rpx;
				padding: 36rpx 38rpx 24rpx 0;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.name {
					position: relative;
					height: 28rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #91743E;
					margin-left: 88rpx;

					.age {
						position: absolute;
						top: 0;
						right: 0;
						color: #000;
						font-size: 28rpx;
						font-weight: 400;
					}
					
					.area {
						position: absolute;
						right: 0;
						top: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}

					.img {
						position: absolute;
						top: -2rpx;
						left: -50rpx;
						// left: -100rpx;
						width: 34rpx;
						height: 40rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.reply {
					display: flex;
					width: 85%;
					justify-content: space-between;
					padding-left: 90rpx;
					margin-top: 24rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #B1B1B1;
				}

				.introduce {
					position: relative;
					margin-top: 20rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #434343;

					.line {
						position: relative;
						height: 50rpx;
						width: 250rpx;
						line-height: 50rpx;
						background: linear-gradient(270deg, #DBB56F 0%, #91743E 100%);
						color: #fff;

						.name {
							margin-top: 16rpx;
							margin-left: 88rpx;
							font-size: 32rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #ffff;
						}

						.img {
							position: absolute;
							left: 28rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 36rpx;
							height: 36rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

					}

					.text {
						margin-top: 16rpx;
						margin-left: 90rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #434343;
					}
				}

				// 预约
				.order {
					width: 100%;
					margin-top: 20rpx;
					padding-left: 55%;
					display: flex;
					// justify-content: space-between;
					.order-btn {
						margin-right: 20rpx!important;
					}
				}
			}
		}
	}

	::v-deep .uniui-calendar:before {
		content: '';
		color: #0480FB;
	}

	::v-deep .uni-input-placeholder {
		color: #B1B1B1;
		font-weight: 400;
	}
	
	/deep/ .u-button__text {
		font-size: 32rpx!important;
	}
	
	/deep/ .content-clear-icon {
		color: #62B1FF!important;
	}
</style>